<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="../css/coupon.css" />
</head>
<body class="gray">
	<div class="mui-content loading" id="vueMain">
	    <div id="slider" class="mui-slider mui-fullscreen">
			<div id="sliderSegmentedControl" class=" mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<a class="mui-control-item mui-active" href="#coupon1">未使用</a>
				<a class="mui-control-item" href="#coupon2">已过期</a>
			</div>
			<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6">
				<div></div>
			</div>
			<div class="mui-slider-group coupon "  style="height: 100%;">
	    			<div id="coupon1" class="mui-slider-item mui-control-content mui-active">
	    				<div id="coupon1-scroll" class="mui-scroll-wrapper ">
						<div class="mui-scroll">
							<div v-if="unused.length==0">
								<p style="padding:50px 20px; text-align: center;">您还没有优惠券！留意官方活动，抢先获取</p>
							</div>
							<div v-else class="mui-content-padded">
								<template v-for="item in unused">
									<div class="item">
										<div class="mui-pull-left media">
											<img src="../icon/coupon-active@2x.png" alt="" />
											<div class="media-text">
												<div class="cir">
													<div><span>¥</span><span>{{item.value}}</span></div>
													<p>满{{item.consume_money}}元使用</p>
												</div>
												
											</div>
										</div>
										<div class="coupon-text">
											<div>
												<h3>{{item.name}}</h3>
												<p>{{item.start_time}}-{{item.end_time}}</p>
												<!--<button type="button" class="mui-btn bexta-btn bexta-btn-red mui-btn-outlined mui-pull-right">立即使用</button>-->
											</div>
										</div>
									</div>
								</template>
							</div>
						</div>
					</div>
	    			</div>
	    			<div id="coupon2" class="mui-slider-item mui-control-content ">
	    				<div id="coupon2-scroll" class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<div class="mui-loading" v-if="!isActive">
								<div class="mui-spinner">
								</div>
							</div>
							<div v-else-if="used.length==0">
								<p style="padding:50px 20px; text-align: center;">哟呵!没有过期券,你还是棒棒滴</p>
							</div>
							<div class="mui-content-padded" v-else>
								<template v-for="item in used">
									<div class="item">
										<div class="mui-pull-left media">
											<img src="../icon/coupon@2x.png" alt="" />
											<div class="media-text">
												<div class="cir">
													<div><span>¥</span><span>{{item.value}}</span></div>
													<p>满{{item.consume_money}}元使用</p>
												</div>
											</div>
										</div>
										<div class="coupon-text">
											<div>
												<h3>{{item.name}}</h3>
												<p>{{item.start_time}}-{{item.end_time}}</p>
												<button type="button" class="mui-btn bexta-btn mui-btn-outlined mui-pull-right">已过期</button>
											</div>
										</div>
									</div>
								</template>
								
							</div>
						</div>
					</div>
	    			</div>
	    		</div>
		</div>
	</div>
<script src="../js/mui-edit.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/bexta.js"></script>
<script type="text/javascript">
	var apps;
	
	mui.plusReady(function () {
//		views = bexta.getWebview();
	   bexta.ajax(api.coupon, function(res){
	   		initVue(res);
	   },{
	   	data:{uid:bexta.getStorage(USER).uid,type:1}
	   });
	});
	function initVue(res){
		apps = new Vue({
			el:'#vueMain',
			data:{
				isActive:false,
				unused:res,
				used:[]
			},
			mounted:function(){
				mui.init();
				document.querySelector('.loading').classList.add('loadRun');
				//把mui里的初始化 注解掉了，在这里初始化才能实现 第5085行
				mui('.mui-slider').slider();
				mui('.mui-scroll-wrapper').scroll();
				
				
				document.getElementById('slider').addEventListener('slide', function(e) {
					if(e.detail.slideNumber == 1 && !apps.isActive){
						//第一次获取
						apps.isActive = true;
						bexta.ajax(api.coupon, function(res){
							if( res.length !=0 ){
								mui.each(res, function(){
									apps.used.push(this);
								});
							}
						},{data:{uid:bexta.getStorage(USER).uid,type:2}})
					}
//					else if(e.detail.slideNumber == 1){
//						bexta.ajax(api.coupon, function(res){
//							if( res.length !=0 ){
//								apps.used = res;
//							}
//						},{data:{uid:bexta.getStorage(USER).uid,type:2}})
//					}
				});
			}
		})
	}
	
</script>
</body>
</html>